<template>
  <view class="container screen-width">
    <view class="company-info">
      <view class="title">主图</view>
      <!-- 轮播图 -->
      <view class="banner-content flex flex-wrap space-between">
        <view class="banner-photo" v-for="(item,index) in carouselMap" :key="index">
          <img :src="$imgUrl + item" />
          <view class="del">
            <icon type="clear" size="16" @tap="delBannerImage(index)" />
          </view>
        </view>
        <view class="banner-photo" style="line-height: 100px" @tap="uploadFile1">+</view>
      </view>
      <view class="title">公司信息</view>
      <!-- 公司描述 -->
      <view class="company-describe">
        <view class="flex items-middle">
          <view class="company-logo" v-if="!companyInfo.companyLogo" @tap="uploadFile(2)">+</view>
          <view class="logo" v-else>
            <img :src="$imgUrl + companyInfo.companyLogo" />
            <view class="del-logo">
              <icon type="clear" size="16" @tap="delLogoImage(0)" />
            </view>
          </view>
          <view class="tips">
            <!-- <view class="name">{{ companyInfo.companyName }}</view> -->
            <cover-view class="describe">
              <input
                placeholder="请输入公司名称"
                @input="getcompanyValue"
                @blur="getShowCompany"
                v-model="companyInfo.companyName"
              />
            </cover-view>
            <view class="company-name" v-if="showCompany&&companyInfo.companyName != ''">
              <ul>
                <li
                  @tap="hanldecompanyName(item.companyName)"
                  v-for="(item,index) in companyList"
                  :key="index"
                >{{item.companyName}}</li>
              </ul>
            </view>
            <cover-view class="describe">
              <input placeholder="补充描述（选填20个字符）" maxlength="20" v-model="companyInfo.slogan" />
            </cover-view>
          </view>
        </view>
        <cover-view class="pro-info">
          <textarea
            @input="remarkInput"
            maxlength="500"
            placeholder="请输入公司简介（最多500个字符）"
            v-model="companyInfo.synopsis"
          ></textarea>
        </cover-view>
      </view>

      <view class="title">核心产品</view>
      <!-- 核心产品 -->
      <view class="product-content">
        <view class="pro-list" v-for="(item,index) in companyInfo.coreProducts" :key="index">
          <img :src="$imgUrl + item.image" />
          <view class="del-pro">
            <icon type="clear" size="16" @tap="delProImage(index)" />
          </view>
          <view class="pro-name">
            <input placeholder="请输入产品名称" v-model="item.name" />
          </view>
        </view>
        <view class="pro-list" v-if="companyInfo.coreProducts.length<5">
          <view class="pro-photo" @tap="uploadFile(3)">+</view>
          <view class="pro-name">
            <input placeholder="请输入产品名称" />
          </view>
        </view>
      </view>
    </view>
    <view class="top-btn" @click="saveCard">保存企业信息</view>
    <Festival></Festival>
  </view>
</template>
<script>
import { addcmsBusinessCard } from "../../util/api/company";
import { companyList } from "../../util/api/es.js";
export default {
  data() {
    return {
      companyId: "",
      companyInfo: {
        companyName: "",
        claimInfo: {
          id: ""
        },
        carouselMap: [],
        coreProducts: [],
        companyLogo: ""
      }, //企业详情
      type: "", //上传图片类型
      carouselMap: [],
      companyList: [], // 公司列表
      showCompany: false
    };
  },
  methods: {
    getcompanyValue() {
      let obj = {
        area: "",
        city: "",
        companyName: this.companyInfo.companyName,
        pageIndex: 1,
        pageSize: 10,
        province: ""
      };
      companyList(obj).then(res => {
        this.showCompany = true;
        this.companyList = res.data.content;
      });
    },
    hanldecompanyName(name) {
      this.companyInfo.companyName = name;
      this.showCompany = false;
    },
    getShowCompany() {
      setTimeout(() => {
        this.showCompany = false;
      }, 500);
    },
    // 保存企业修改
    saveCard() {
      let params = {
        carouselMap: JSON.stringify(this.carouselMap),
        companyName: this.companyInfo.companyName,
        companyLogo: this.companyInfo.companyLogo,
        coreProducts: JSON.stringify(this.companyInfo.coreProducts),
        slogan: this.companyInfo.slogan,
        synopsis: this.companyInfo.synopsis
      };
      if (params.companyName === "") {
        uni.showToast({
          title: "公司名称未填写",
          duration: 2000,
          icon: "none"
        });
        return;
      }
      addcmsBusinessCard(params).then(res => {
        if (res.code === 200) {
          uni.showToast({
            title: "保存成功",
            duration: 2000,
            icon: "none"
          });
          setTimeout(() => {
            uni.navigateBack({
              url: "/pages/companyWeb/list"
            });
          }, 1000);
        } else {
          uni.showToast({
            title: res.message,
            duration: 2000,
            icon: "none"
          });
        }
      });
    },
    remarkInput(event) {
      let length = event.target.value.length;
      if (length === 500) {
        uni.showToast({
          title: "最多只能输入500字符",
          icon: "none"
        });
      }
    },
    // 删除产品
    delProImage(index) {
      let _this = this;
      uni.showModal({
        title: "提示",
        content: "确认删除此图片",
        cancelText: "考虑一下",
        success(res) {
          if (res.confirm) {
            _this.companyInfo.coreProducts.splice(index, 1);
          }
        }
      });
    },
    // 删除logo
    delLogoImage(index) {
      let _this = this;
      uni.showModal({
        title: "提示",
        content: "确认删除此图片",
        cancelText: "考虑一下",
        success(res) {
          if (res.confirm) {
            _this.companyInfo.companyLogo = "";
          }
        }
      });
    },
    // 删除Banner图片
    delBannerImage(index) {
      let _this = this;
      uni.showModal({
        title: "提示",
        content: "确认删除此图片",
        cancelText: "考虑一下",
        success(res) {
          if (res.confirm) {
            _this.carouselMap.splice(index, 1);
          }
        }
      });
    },
    uploadFile1() {
      let _this = this;
      uni.chooseImage({
        count: 9,
        success: chooseImageRes => {
          const tempFilePaths = chooseImageRes.tempFilePaths;
          this.fileList = tempFilePaths;
          tempFilePaths.forEach(element => {
            console.log("11111", element);
            uni.uploadFile({
              url: "https://bootapi.51bmj.cn/bmj-api/api/home/upload", //仅为示例，非真实的接口地址
              filePath: tempFilePaths[0],
              name: "file",
              success: res => {
                let { data } = res;
                try {
                  data = JSON.parse(data);
                  _this.carouselMap.push(data.result);
                  if (_this.carouselMap.length >= 10) {
                    uni.showToast({
                      title: "宣传公司图片最多存放9张或以下",
                      duration: 2000,
                      icon: "none"
                    });
                    _this.carouselMap = _this.carouselMap.slice(0, 9);
                  }
                } catch (error) {
                  console.log(error);
                }
              }
            });
          });
        }
      });
    },
    // 上传Banner图片
    uploadFile(type) {
      this.type = type;
      let _this = this;
      uni.chooseImage({
        count: 9,
        success: chooseImageRes => {
          const tempFilePaths = chooseImageRes.tempFilePaths;
          this.fileList = tempFilePaths;
          tempFilePaths.forEach(element => {
            console.log(element);
            uni.uploadFile({
              url: "https://bootapi.51bmj.cn/bmj-api/api/home/upload", //仅为示例，非真实的接口地址
              filePath: element,
              name: "file",
              success: res => {
                let { data } = res;
                if (_this.type === 3) {
                  try {
                    data = JSON.parse(data);
                    let params = {
                      image: data.result,
                      name: ""
                    };
                    _this.companyInfo.coreProducts.push(params);
                  } catch (error) {
                    console.log(error);
                  }
                } else {
                  try {
                    data = JSON.parse(data);
                    _this.companyInfo.companyLogo = data.result;
                  } catch (error) {
                    console.log(error);
                  }
                }
              }
            });
          });
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.container {
  .top-btn {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 13px 0;
    box-sizing: border-box;
    text-align: center;
    background: #1678ff;
    color: white;
    font-size: 16px;
    max-width: 750px;
    z-index: 999;
  }
  .company-info {
    width: 100%;
    background: #dee4f0;
    padding: 15px 15px 55px 15px;
    box-sizing: border-box;
    .title {
      font-size: 20px;
      font-weight: 700;
      color: #333333;
      margin-bottom: 15px;
    }
    .banner-content {
      width: 100%;
      .banner-photo {
        width: 48%;
        height: 100px;
        background: #ffffff;
        font-size: 24px;
        color: #1678ff;
        font-weight: 500;
        // line-height: 100px;
        text-align: center;
        margin-bottom: 10px;
        position: relative;
        img {
          width: 100%;
          height: 100px;
        }
        .del {
          color: #fff;
          width: 16px;
          height: 16px;
          position: absolute;
          right: 0;
          top: -5px;
          border-radius: 50%;
          font-size: 16px;
        }
      }
    }
    .company-describe {
      width: 100%;
      margin-bottom: 10px;
      .company-logo {
        width: 80px;
        height: 80px;
        background: #ffffff;
        line-height: 80px;
        font-size: 24px;
        text-align: center;
        color: #1678ff;
        margin-right: 15px;
      }
      .logo {
        width: 80px;
        height: 80px;
        margin-right: 15px;
        position: relative;
        img {
          width: 80px;
          height: 80px;
        }
        .del-logo {
          color: #fff;
          width: 16px;
          height: 16px;
          position: absolute;
          right: 0;
          top: -5px;
          border-radius: 50%;
          font-size: 16px;
        }
      }
      .tips {
        width: 90%;
        position: relative;
        .company-name {
          position: absolute;
          top: 100rpx;
          z-index: 999;
          ul {
            padding: 0 20rpx;
            box-sizing: border-box;
            width: 100%;
            max-height: 240rpx;
            background-color: #fff;
            overflow-y: auto;
            box-shadow: 4rpx 4rpx 10rpx rgba(54, 54, 54, 0.2);

            li {
              font-size: 24rpx;
              width: 100%;
              // min-height: 80rpx;
              height: 55rpx;
              line-height: 55rpx;
              // align-items: center;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1; //限制行数
              overflow: hidden; //超出部分隐藏
              text-overflow: ellipsis;
            }
          }
        }
      }
      .name {
        font-size: 18px;
        font-weight: 700;
        color: #333333;
        width: 100%;
        border-bottom: 1px solid #c6ccd8;
        padding-bottom: 10px;
      }
      .describe {
        font-size: 14px;
        width: 100%;
        border-bottom: 1px solid #c6ccd8;
        padding: 10px 0;
      }
      .pro-info {
        font-size: 14px;
        padding: 10px 0;
        border-bottom: 1px solid #c6ccd8;
      }
    }
    .person-content {
      width: 100%;
      margin-top: 15px;
      .list {
        width: 100%;
        background: #ffffff;
        padding: 10px;
        box-sizing: border-box;
        box-shadow: 0px 1px 7px 0px rgba(132, 202, 187, 0.3);
        border-radius: 5px;
        .item {
          margin-bottom: 10px;
          .name {
            font-size: 18px;
            font-weight: 700;
            color: #333333;
            margin-right: 10px;
          }
          .post {
            font-size: 14px;
            font-weight: 400;
            color: #999999;
          }
          img {
            width: 16px;
            height: 16px;
          }
          .lable {
            font-size: 16px;
            font-weight: 400;
            color: #999999;
            margin: 0 10px;
          }
          .lable-content {
            font-size: 16px;
            font-weight: 400;
            color: #333333;
          }
        }
      }
      .person-btn {
        width: 45%;
        height: 44px;
        line-height: 44px;
        text-align: center;
        font-size: 16px;
        background: #1678ff;
        color: #ffffff;
        margin: 20px 0 30px 0;
      }
    }
    .create-card {
      width: 100%;
      height: 300upx;
      background: #dee4f0;
      display: flex;
      align-items: center;
      justify-content: center;
      .create-btn {
        background: #1678ff;
        color: #ffffff;
        padding: 10px 30px;
      }
    }
    .product-content {
      width: 100%;
      .pro-list {
        margin-bottom: 10px;
        position: relative;
        img {
          width: 100%;
          height: 160px;
        }
        .pro-photo {
          width: 100%;
          height: 160px;
          line-height: 160px;
          background: #ffffff;
          font-size: 24px;
          text-align: center;
          color: #1678ff;
        }
        .pro-name {
          width: 100%;
          border-bottom: 1px solid #c6ccd8;
          padding: 10px;
          font-size: 16px;
          text-align: center;
        }
        .del-pro {
          color: #fff;
          width: 16px;
          height: 16px;
          position: absolute;
          right: 0;
          top: -5px;
          border-radius: 50%;
          font-size: 16px;
        }
      }
    }
  }
}
</style>